<template>
  <div class="main">
    <!-- <div class="backbutton">
      <a-icon type="left" />
      <strong>&nbsp;快捷方式系列</strong>
    </div> -->
    <div class="container">
      <div class="title">
        基本信息
      </div>
      <div class="content">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="商标图样">
            <span v-if="!formData.imageUrl">无图片</span>
            <img @click="uploadPreview({id:formData.picture,fileName:'痛苦面具.gif'})" v-else :src="formData.imageUrl" width="50" height="50" alt="">
            <a style="margin-left:8px" v-if="!!formData.picture" v-has="'brand:downloadAttach,brand:admin'" @click="doDownLoadBatch(formData.picture)">下载</a>
          </a-descriptions-item>
          <a-descriptions-item label="商标名称">
          {{formData.brandName}}
          </a-descriptions-item>
          <a-descriptions-item label="商标状态">
             {{formData.status}}
          </a-descriptions-item>
          <a-descriptions-item label="商标标签">
              {{formData.brandLabel}}
          </a-descriptions-item>
          <a-descriptions-item label="商标类型">
             {{formData.brandType}}
          </a-descriptions-item>
          <a-descriptions-item label="商标价值">
            {{formData.brandValue}}
          </a-descriptions-item>
          <a-descriptions-item label="国际分类">
            {{formData.internationalClass}}
          </a-descriptions-item>
          <a-descriptions-item label="申请号/注册号">
           {{formData.applicationNo}}
          </a-descriptions-item>
          <a-descriptions-item label="申请日期">
              {{formData.applicationTime}}
          </a-descriptions-item>
          <a-descriptions-item label="初审公告日期">
            {{formData.firstInstanceTime}}
          </a-descriptions-item>
          <a-descriptions-item label="注册公告日期">
               {{formData.registerTime}}
          </a-descriptions-item>
          <a-descriptions-item label="专用权期限">
              {{formData.termTime}}
          </a-descriptions-item>
          <a-descriptions-item label="是否应续展">
             {{formData.isExtension ==='1' ?'是':'否'}}
          </a-descriptions-item>
          <a-descriptions-item label="申请人名称">
              {{formData.applicationName}}
          </a-descriptions-item>
          <a-descriptions-item label="实际权属主体">
            {{formData.mainBody}}
          </a-descriptions-item>
          <a-descriptions-item label="权利证书" :span="2">
            <ht-upload :key="formData.id"
                  class="avatar-uploader"
                  multiple
                  ref="htUploadRef"
                  dbKey="Trd"
                  busField="hteLibBrand"
                  :busKey="formData.id"  
                  busType="letterOfAuthorization"
                  ftpKey="ftp"
                  :show-file-list = "false"
                  :onPreview="uploadPreview"
               
                    :before-remove="beforeRemove"
                  v-model="certificatelist">
                  <!-- <el-button  size="small" type="primary">上传</el-button> -->
                </ht-upload> 
                <a-button v-has="'brand:downloadAttach,brand:admin'" type="primary"  :disabled="otherAttachSelectedIds.length === 0" @click="downLoadBatch">下载</a-button>
                <div style="max-width:100%;margin-top:8px">
                       <a-table 
            :row-selection="{ selectedRowKeys: otherAttachSelectedIds, onChange: otherAttachSelected }"
            :columns="otherAttachColumns"
            :data-source="otherAttachDataList"
            bordered
            :pagination="false"
          
          >
            <template slot="name" slot-scope="text, record">
              <a @click="uploadPreview(record)">{{ record.name }}</a>
            </template>
          </a-table>
                </div>
              
            <!-- 权利证书名称.doc -->
          </a-descriptions-item>
          <a-descriptions-item label="已覆盖类似群编号" :span="2">
            {{formData.groupCode}}
            <a-button type="primary" v-has="'brand:detail,brand:admin'" @click="handleDetail">撤销风险明细</a-button>
          </a-descriptions-item>
          <a-descriptions-item label="已申请/核定商品/服务名称" :span="2">
           {{formData.groupGoodsService}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>

     <!-- 商品服务明细 -->
      <a-modal
        title="商品服务明细"
        :visible="productDetailPopUp"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width='70vw'
        wrapClassName="productDetailPopUp"
      >
        <div class="headerControl">
          <a-input-group compact>
            
            <!-- <a-select default-value="A">
              <a-select-option value="A">
                商品名称
              </a-select-option>
              <a-select-option value="B">
                商品
              </a-select-option>
            </a-select> -->
            
            <a-input-search placeholder="按已覆盖类似群、已申请/核定商品/服务模糊查询" v-model="valueSearch"  @search="handleSearch" width="200"/>
           
          </a-input-group>
          <!-- <div> <a-button @click="productDetailAdd(null)">新增</a-button>
             <a-button  @click="excelVisible=true">导入Excel</a-button></div>
         -->
            
        </div>
        <a-table
          :columns="productDetailList"
          :data-source="productDetaildata"
          rowKey='id'
          :pagination="ipagination"
          @change="handleTableChange"
          
          :indentSize='15'
          bordered
        >
        
        <template slot="levelSlot" slot-scope="text">
          <div >{{ text==0||!text?'待定':text+'级'}}</div>
        </template>
         <template slot="booleanSlot" slot-scope="text">
          <div >{{ text===1?'是':'否'}}</div>
        </template>
         <span slot="action" slot-scope="text, record">
          <a v-has="'brand:edit,brand:admin'" @click="productDetailAdd(record)">编辑</a>
          <a-divider type="vertical"  v-has="'brand:edit,brand:admin'" />
          <a v-has="'brand:delete,brand:admin'" @click="productDetailDelete(record.id)">删除</a>        
        </span>
        </a-table> 
      </a-modal>
      <!-- 新建商品明细 -->


       <a-modal
        title="商品服务新增/编辑"
        :visible="productCreat.visible"
        :closable="false"
        :confirm-loading="productCreat.confirmLoading"
        @ok="productCreatHandleOk"
        @cancel="handleCancel('productCreat')"
        width='80vw'
        wrapClassName="createTrademarkoPopUp"
      >
        <a-form-model ref="productCreatForm" :model="productCreat.model" :rules="productCreat.validatorRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="已覆盖类似群" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="productCreat.model.code" placeholder="请输入已覆盖类似群"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="类似群的价值等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="valueLevel">
               <a-select v-model="productCreat.valueLevel" placeholder="">
                   <a-select-option value="0"  key="类似群的价值等级">
                    待定
                  </a-select-option>
                  <a-select-option :value="item" v-for="item of 3" :key="item">
                    {{`${item}级`}}
                  </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="已申请/核定商品/服务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsService">
              <a-input v-model="productCreat.model.goodsService" placeholder="请输入已申请/核定商品/服务"  ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="具体增值点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addedValue">
              <a-input v-model="productCreat.model.addedValue" placeholder="请输入具体增值点"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="具体使用的商品" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specificUseGoods">
              <a-input v-model="productCreat.model.specificUseGoods" placeholder="请输入具体使用的商品"  ></a-input>
            </a-form-model-item>
          </a-col>
         <a-col :span="24">
            <a-form-model-item label="具体使用的服务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specificUseService">
              <a-input v-model="productCreat.model.specificUseService" placeholder="请输入具体使用的服务"  ></a-input>
            </a-form-model-item>
          </a-col>

       
         
         
        </a-row>
      </a-form-model>
      </a-modal>
      <excel-paste :columnsExcel="columnsExcel" :exportXlsTemplateUrl="exportXlsTemplateUrl"  :excelVisible="excelVisible" :excelConfirmLoading="excelConfirmLoading"   @handleOkExcel="handleOkExcel" @handleCancelExcel="handleCancelExcel"></excel-paste>
  </div>
</template>
<script>
import '@/utils/upload.install.js'
import Vue from 'vue'
import $ from 'jquery'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { formatFileSize, endWith,strNotNull } from '@/utils/common.js'
import { httpAction, getAction,postAction,previewAttach } from '@/api/manage'
import ExcelPaste from '@/components/excelPaste/ExcelPaste'

  const otherAttachColumns = [
  {
    title: '附件名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    // width:30
  }
]
export default {
 components: {
      ExcelPaste
    
    },
  data () {
    return {
       labelCol: { span: 8 },
      wrapperCol: { span: 14 },
       productCreat:{
        visible:false,
        confirmLoading:false,
        model:{},
        validatorRules: {
           code: [
              { required: true, message: '请输入已覆盖类似群!'},
           ]
        },


      },
      valueSearch:'',
      productDetailPopUp:false,
      confirmLoading:false,
      formData:{},
      ipagination:{
        current: 1,
        pageSize: 10
      },
      certificatelist:[],
      url:{
        listWeb:'/knowledge/brand/listWeb',
          commonImage:'/common/getImage',
          brandSimilitudeGroup: "/knowledge/brandSimilitudeGroup/list",
          delete: "/knowledge/brandSimilitudeGroup/delete",
          deleteBatch: "/knowledge/brandSimilitudeGroup/deleteBatch",
          exportXlsUrl: "/knowledge/brandSimilitudeGroup/exportXls",
          importExcelUrl: "knowledge/brandSimilitudeGroup/importExcel",
          addBatch: "knowledge/brandSimilitudeGroup/addBatch",
          add: "/knowledge/brandSimilitudeGroup/add",
          edit: "/knowledge/brandSimilitudeGroup/edit",
          downLoadBatch: '/common/downLoadBatch',
      },
      
        // 表头
        productDetailList: [
        
        
          {
            title:'已覆盖类似群',
            align:"center",
            dataIndex: 'code'
          },
           
          {
            title:'已申请/核定商品/服务',
            align:"center",
            dataIndex: 'goodsService'
          },
         {
            title:'类似群的价值等级',
            align:"center",
            dataIndex: 'valueLevel',
             scopedSlots: { customRender: 'levelSlot' }
          },
          {
            title:'具体增值点',
            align:"center",
            dataIndex: 'addedValue'
          },
          {
            title:'具体使用的商品',
            align:"center",
            dataIndex: 'specificUseGoods',
            
          },
           {
            title:'具体使用的服务',
            align:"center",
            dataIndex: 'specificUseService',
            
          },
           {
            title:'是否有撤销风险',
            align:"center",
            dataIndex: 'isCancelRisk',
            
             scopedSlots: { customRender: 'booleanSlot' }
          },
          {
            title:'撤销风险等级',
            align:"center",
            dataIndex: 'cancelRiskLevel',
             scopedSlots: { customRender: 'levelSlot' }
          },
          
          // {
          //     title: '操作',
          //     dataIndex: 'action',
          //     align:"center",
          //     fixed:"right",
          //        width:147,
          //     scopedSlots: { customRender: 'action' }
          //   }
        ],
      productDetaildata:[],
         columnsExcel:[
           {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            },
            isImportExcelColumns:false
          },
       
          {
            title:'已覆盖类似群',
            align:"center",
            dataIndex: 'code'
          },
           
          {
            title:'已申请/核定商品/服务',
            align:"center",
            dataIndex: 'goodsService'
          },
          {
            title:'具体增值点',
            align:"center",
            dataIndex: 'addedValue'
          },
          {
            title:'具体使用的服务',
            align:"center",
            dataIndex: 'specificUseGoods'
          },
           {
            title:'具体使用服务',
            align:"center",
            dataIndex: 'specificUseService'
          },
           
          
        ],
        excelVisible:false,
        excelConfirmLoading:false,
        excelDataSource:[],
        exportXlsTemplateUrl:'templates/excel/brandSimilitudeGroupApplicationNoAppTemplate.xlsx',
         otherAttachSelectedIds: [], 
         otherAttachColumns
    }
  },
  created(){
    
   
   this.loadData()
  },

   watch: {
    certificatelist: function () {
      this.otherAttachDataListFresh()
    },
  },
  methods: {
   loadData(){

      let that = this;
     
      let brandId = this.$route.query.brandId
      
       getAction(this.url.listWeb,{id:brandId}).then(res =>{
        
          if(res.code === 200){
               this.formData = res.result.records[0];
               this.getImgView(this.formData)
            }
            }).catch(res=>{
          })
    },
      handleTableChange(pagination, filters, sorter) {
       that.ipagination= pagination
        that.handleSearch();
    },
    handleDetail(){
      this.productDetailPopUp =true ;
      this.ipagination.current = 0
      this.handleSearch();
    },

    handleSearch(keyword){

      let params = {keyword:keyword,column:"code",order:"Asc",applicationNo:this.formData.applicationNo}
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getAction(this.url.brandSimilitudeGroup,params).then(res =>{
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.productDetaildata = res.result.records||res.result;
        
        }
      })
    },
    clearSearch(){
       this.ipagination.current = 0
       this.valueSearch = ''
       this.handleSearch(null);
    },
    
     productDetailAdd(data){
      
        this.productCreat.visible = true
        const that = this;
        this.productCreat.model = !!data?data:{};
        this.productCreat.model.applicationNo = this.createFrom.applicationNo
        this.productCreat.model = Object.assign({}, this.productCreat.model);
        
      },
      productCreatHandleOk(){
        let that =this
        // 触发表单验证
                this.$refs.productCreatForm.validate(valid => {
                    if (valid) {
                          this.productCreat.confirmLoading = true
                        postAction(this.url.addBatch,data).then(res => {
                      this.excelConfirmLoading = false;
                        if(res.code === 200){
                          
                          this.excelVisible = false;
                          this.$message.success("导入成功");
                          this.clearSearch();
                        }else{
                          this.$message.warning('操作异常:'+res.message);
                        }
                    }).catch(res=>{
                            this.excelConfirmLoading = false;
                            this.$message.warning('操作异常:'+res.message);
                            
                        })
                    
                                }
                })
      },
      handleOkExcel:function(data){
           
         for (let index = 0; index < data.length; index++) {
          const element = data[index];
          if(!element.code){
            this.$message.warning(`已覆盖类似群不能为空`);
            return;
          }
          let checkData = data.filter(item =>{
            return  item.code == element.code; 
          })
          if(!!checkData && checkData.length > 1 ){
            this.$message.warning(`导入失败:${item.code }已覆盖类似群重复`);
            return;
          }
         data[index].applicationNo = this.createFrom.applicationNo
        }
        this.createFrom.brandSimilitudeGroups = data;
        this.importDetail.excelVisible = false;
        //数据验证
        this.excelConfirmLoading = true;
        postAction(this.url.addBatch,data).then(res => {
          this.excelConfirmLoading = false;
            if(res.code === 200){
              
              this.excelVisible = false;
              this.$message.success("导入成功");
              this.clearSearch();
            }else{
              this.$message.warning('操作异常:'+res.message);
            }
        }).catch(res=>{
                this.excelConfirmLoading = false;
                this.$message.warning('操作异常:'+res.message);
                
            })
        
      },
        handleCancelExcel:function(){
        this.excelVisible = false;
       
      },
      productDetailDelete(id){
       var that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.delete, {ids: id}).then((res) => {
              if (res.success) {
              
                that.$message.success(res.message);
                that.loadData();
                
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
          
      },
    handleOk(){

      this.productDetailPopUp =false ;
    },
    handleCancel(){
      this.productDetailPopUp =false ;
     this.productCreat.visible = false
    },
    uploadPreview(file){
      
       //以rar、zip、dwg结尾的文件，直接下载不预览
      if (
        endWith(file.fileName, 'rar') ||
        endWith(file.fileName, 'zip') ||
        endWith(file.fileName, 'dwg') ||
        endWith(file.fileName, 'tgz') ||  endWith(file.fileName, 'xlsx') || endWith(file.fileName, 'xls') 
      ) {
        
        return true
      }
      let params={
        id:file.id,
        ftpKey:'ftp'
      };
      previewAttach(params).then(result=>{
        const url=URL.createObjectURL(result)
        window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
      }).catch(err => {
        this.$message.warning('下载文件失败');
      })
    },
    beforeRemove(){
        this.$message.error("禁止删除附件");
       throw "禁止删除";
    },
   getImgView(formData){
      let $that = this;
     

        if(!!formData.picture){
            let attachmentVO = {busField:'hteLibBrand',busType:'picture',dbKey:"Trd",ftpKey:'ftp',id:formData.picture};
          
         getAction($that.url.commonImage,attachmentVO).then(res =>{
          if(res.code === 1){
            
               $that.formData.imageUrl = res.data;
               $that.formData = Object.assign({},$that.formData)
            }
            }).catch(res=>{
          })
        }
        

      
     
    },
      otherAttachSelected(selectedRowKeys) {
      this.otherAttachSelectedIds = selectedRowKeys
    },
      downLoadBatch() {
        
      
      this.doDownLoadBatch(this.otherAttachSelectedIds.join(","))
    },

     doDownLoadBatch(attachIds) {
       
       
      if (document.getElementById('_attachToolView_downloadfile_frame') == null) {
        var downloadFrame = $('<iframe id="_attachToolView_downloadfile_frame" style="display: none"></iframe>')
        downloadFrame.appendTo($('body'))
      }
      var iframe = document.getElementById('_attachToolView_downloadfile_frame')
      var href =
        this.API_BASE_URL +
        this.url.downLoadBatch +
        '?attachIds=' +
        attachIds +
        '&dbKey=Trd&ftpKey=ftp&token=' +
        Vue.ls.get(ACCESS_TOKEN)
      iframe.src = href
    },
    otherAttachSelected(selectedRowKeys) {
      this.otherAttachSelectedIds = selectedRowKeys
    },
    otherAttachDataListFresh() {
      this.otherAttachDataList = []
      this.certificatelist.forEach((item) => {
        var size = formatFileSize(item.size)
        this.otherAttachDataList.push({
          key: item.id,
          name: item.fileName,
          size: size,
          time: item.uploadTime,
          uploader: item.uploader,
          uploaderName: item.uploaderName,
        })
      })
    },
  }
}
</script>
<style lang="less" scoped>

/deep/ .mainTainPopUp,/deep/ .selectAgencyPopUp,/deep/.selectProposerPopUp,/deep/ .selectServicePopUp,/deep/ .productDetailPopUp{
  .ant-modal-title{
    color: #fff;
    font-weight: 900;
  }
  .ant-modal-body{
    padding: 24px 24px 0 24px;
  }
  .ant-input-group.ant-input-group-compact{
    display: flex;
    width: 40%
  }
  .ant-modal-header{
    background: #388cdb;
    color: #fff;
    text-align: center;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .ant-btn-primary{
    background: #4095e4;
  }
  .ant-btn{
    width: 85px;
    height: 30px;
    border-radius: 2px;
    margin-right: 10px;
  }
  .ant-table-thead > tr > th {
    background: #dadee9 !important;
   
    padding: 10px;
  }
  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }

  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .headerControl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .selected-box{
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 0px 0 0 10px;
    .ant-select-selection{
      border:unset;
      border-left: 1px solid #eee;
      border-radius: unset;
      margin-left: 10px;
    }
  }
}

.main{

    margin: 20px 125px 0;
    min-height: 100%;
    background: #fff;
    border: 1px solid #efefef;
    .backbutton{
      padding: 20px;
      border-bottom: 1px solid #efefef;
      strong{
        font-size: 16px;
      }
    }
    .container{
      padding: 20px 25px;
      .title{
        border-left: 4px solid #47a4fa;
        padding-left: 5px;
        font-weight: 800;
      }
      .content{
        padding: 20px;
      }
    }
}
/deep/ .productServicePopUp,/deep/ .intellectualInfoPopUp,/deep/.createTrademarkoPopUp{
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-col-12{
    margin: 5px 0;
  }
  .ant-btn{
    width: fit-content;
  }
  .status-box{
    padding: 0 50px 20px;
  }
  .product-list{
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    padding: 20px 50px;
    .product-name{
      margin-left: 20px;
    }
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .btn{
    text-align: center;
    margin: 30px 0 0;
  }
  .ant-form-item{
    margin-bottom: 0;
  }
  .changeStyle .ant-form-item-label{
    line-height: unset;
    white-space:pre-wrap;
  }
  .upload-demo{
    /deep/ .ant-table-thead > tr > th {
      background: #d9dee8 !important;
    }
    /deep/.ant-table-thead > tr:first-child > th:first-child,/deep/ .ant-table table{
      border-radius: unset;
      line-height: 1;
    }
  }
}
 /deep/ .ant-descriptions-bordered .ant-descriptions-item-label{
    width:15%;
}
 /deep/ .ant-descriptions-bordered .ant-descriptions-item-content{
    width:35%;
}
</style>